import React, { useEffect, useState } from 'react';
import {Form,Input,Col,Button,message} from 'antd'
import {useNavigate } from 'react-router-dom'
import '../../styles/zheng/ResetPass.scss'
import {getData,changeData} from '../../api/zheng/index'
interface Props{

}
function ResetPass(props:Props) {
    // 调用Form的钩子函数useForm()
    const [form] = Form.useForm()
    const [messageApi, contextHolder] = message.useMessage()
    var [pass,setPass] = useState('')
    var [data,setData] = useState({})
    const navigate = useNavigate()
    useEffect(()=>{
        getData().then(res=>{
            var mydata = res.data.find((item:any)=>{
                return item.id ==  JSON.parse(localStorage.getItem('user')+'').id
            })
            setData(mydata)
            setPass(mydata.pass)
        })
    },[])
    // 提交表单
    const onFinish = (values: any) => {
        if(values.oldpass == undefined || values.newpass == undefined || values.enterpass == undefined){
            messageApi.open({
                type: 'warning',
                content: '您还没有设置密码',
              });
        }
        else if(values.oldpass!= '' && values.oldpass != pass){
            messageApi.open({
                type: 'error',
                content: '密码不正确',
              });
        }else if(values.newpass == pass){
            messageApi.open({
                type: 'warning',
                content: '与旧密码不可一致',
              });
        }
        else if(values.newpass != values.enterpass){
            messageApi.open({
                type: 'warning',
                content: '两次密码输入必须一致',
              });
        }else{
            changeData({...data,pass:values.enterpass}).then(res=>{
               if(res.status == 200){
                messageApi.open({
                    type: 'success',
                    content: '保存成功,请重新登陆',
                  });
                  setTimeout(()=>{
                    navigate('/login')
                  },2000)
               }
            })
        }
    };
    // 提交失败
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
      };
    return (
        <div className='resetpass'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>重置密码</h3>
            </div>
            <Form
            {...layout}
             form={form}
             layout="inline"
             onFinish={onFinish}
             onFinishFailed={onFinishFailed}>
                <Col span={24}>
                <Form.Item
                        label="旧密码"
                        name="oldpass"
                        rules={[{ message: '请输入' }]}
                    >
                        <Input.Password />
                </Form.Item>
                </Col>
                <Col span={24}>
                <Form.Item
                        label="新密码"
                        name="newpass"
                        rules={[{ message: '请输入' }]}
                    >
                        <Input.Password />
                </Form.Item>
                </Col>
                <Col span={24}>
                <Form.Item
                        label="确认密码"
                        name="enterpass"
                        rules={[{ message: '请输入' }]}
                    >
                        <Input.Password />
                </Form.Item>
                </Col>

                <Col span={24}>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Col>
            </Form>
            {contextHolder}
        </div>
    );
}

export default ResetPass;